<template>
    <div>
        <a-form style="max-width: 500px; margin: 40px auto 0;">
            <a-alert
                    :closable="true"
                    message="通常需要先对数据源进行配置，以完成更高级的功能!"
                    style="margin-bottom: 24px;"/>
            <a-form-item
                    label="选择数据源配置"
                    :labelCol="{span: 5}"
                    :wrapperCol="{span: 19}">
                <a-select placeholder="请选择" v-model="selectedValue">
                    <a-select-option v-for="item in columnConfigGroupList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item :wrapperCol="{span: 19, offset: 5}">
                <a-button type="primary" @click="nextStep">下一步</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
export default {
  name: "Step1",
  data() {
    return {
      columnConfigGroupList: [],
      selectedValue: undefined
    }
  },
  methods: {
    nextStep () {
      if (!this.selectedValue) {
        this.$message.error('请选择!')
        return
      }
      this.$emit('nextStep', { columnConfigGroupId: this.selectedValue })
    }
  },
  mounted() {
    this.Atm.getAction('codeGenerator/generatorColumnConfigGroup/list')
      .then(res => {
        if (res.code == 0) {
          this.columnConfigGroupList = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
  }
}
</script>

<style scoped>

</style>
